<template>
  <div class="goods_add">
    <!-- <p
      class="color-666"
      style="margin-bottom:10px"
    >商品{{maxNum}}</p> -->
    <goods-link v-for="(item, index) in goodsList" :key="item.goods_id" :goods-data="item" :show-tool="true" @handleDelete="deleteGoods(index)" @upSort="upSort(index)" @downSort="downSort(index)" />
    <div v-if="goodsList.length < maxNum" class="add-div" @click="openSelect">
      <i class="el-icon-plus" />添加商品({{ goodsList.length }}/{{ maxNum }})
    </div>
    <goods-dialog ref="goodsDialog" :multiple="true" :max-num="maxNum" :show-checked-tool="true" @setSelect="setSelect" />
  </div>
</template>

<script>
import goodsLink from '../../recommend/compoments/goodsLink'
import goodsDialog from '@/components/goodsDialog.vue'
export default {
  components: { goodsLink, goodsDialog },
  // props: ['maxNum', 'goodsList'],
  props: {
    maxNum: {
      type: String,
      default: ''
    },
    goodsList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  mounted() {
    // console.log(this.goodsList)
  },
  methods: {
    // 升序
    upSort(index) {
      if (index === 0) {
        return
      }
      const list = [...this.goodsList]
      const item = list[index]
      list[index] = list[index - 1]
      list[index - 1] = item
      this.$emit('setGoods', list)
    },
    // 降序
    downSort(index) {
      if (index === this.goodsList.length - 1) {
        return
      }
      const list = [...this.goodsList]
      const item = list[index]
      list[index] = list[index + 1]
      list[index + 1] = item
      this.$emit('setGoods', list)
    },
    // 删除商品
    deleteGoods(index) {
      const list = [...this.goodsList]
      list.splice(index, 1)
      this.$emit('setGoods', list)
    },
    // 设置选中
    setSelect(goodsList) {
      this.$emit('setGoods', goodsList)
    },
    // 添加商品
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true
      this.$refs.goodsDialog.selectItems = [...this.goodsList]
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
